<script setup>
import {
    Position,
    Handle,
    useVueFlow
} from '@vue-flow/core'
import {
    watch,
    provide, inject
} from "vue";

import AiChatSetting from './cnps/AiChatSetting.vue';

const props = defineProps(['id', 'data'])
provide('currentNodeId', props.id);

const updateNodesData = inject("updateNodesData")
// 监听props.data的变化
watch(() => props.data, (newValue, oldValue) => {
    console.log('props.data changed ', newValue);
    updateNodesData();
}, {
    deep: true
})
</script>

<template>
    <div class="_container">
        <div class="fx fx-c_center pad-16 header">
            <div class="fx fx-center wh-40 logo">
                <jb-icon :local="true" icon="ri:robot-2-fill" width="30" color="#22c55e"></jb-icon>
            </div>
            <div class="ml-10 tc-dark">
                <div>AI 回答</div>
                <p class="font-12 tc-assist">调用AI 大模型进行回答</p>
            </div>
        </div>
        <div class="form fx-col pad-16 ">
            <AiChatSetting v-model="props.data.llmConfig"
                           :out="['modelType', 'promptTpl','outputToResponse', 'useContext', 'persistDb']"
                           :inner="['systemRole','maxTokens', 'temperature', 'topP', 'topK']"/>
        </div>
        <div class="footer pad-16">
            <p class="tc-gray ">输出字段</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag noshrink"></div>
                    <n-input v-model:value="props.data.llmConfig.outputField" placeholder="字段名"
                             class="tc-gray ml-8 w-140"></n-input>
                </div>
                <span class="tc-assist">AI 生成的回答</span>
            </div>
        </div>

        <Handle type="target" :position="Position.Left"/>
        <Handle type="source" id="success" :position="Position.Right"
                style="transform: translate(50%, calc(-50% - 30px))"/>
        <Handle type="source" id="fail" :position="Position.Right"
                style="transform: translate(50%, calc(-50% + 30px))"/>


    </div>
</template>

<style scoped>
._container {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    width: 380px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.header,
.form {
    border-bottom: 1px solid rgb(229, 231, 235);
}

.logo {
    background: #dcfce7;
    border-radius: 12px;
}

label {
    margin-bottom: 8px;
}

label:not(:first-child) {
    margin-top: 16px;
}

.output {
    background: rgb(249, 250, 251);
    border-radius: 12px;
}

.output-flag {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.more_btn {
    background: #f9fafb;
    padding: 8px;
    margin-top: 16px;
    cursor: pointer;
    border-radius: 6px;
}
</style>
